<template>
  <div class="adminHandle" >
    <h3>请假管理</h3>
    <div class="showMsg">
      <div class="tableList">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
<!--            <el-table-column-->
<!--              prop="id"-->
<!--              label="申请id"-->
<!--              width="90px">-->
<!--            </el-table-column>-->
            <el-table-column
              prop="snumber"
              label="申请人学号"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="sname"
              label="申请人姓名"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="startDate"
              label="开始时间">
            </el-table-column>
            <el-table-column
              prop="endDate"
              label="结束时间">
            </el-table-column>
            <el-table-column
              prop="flag"
              label="审核"
              width="90px">
              <template slot-scope="scope">
                <img class="pic" v-show="scope.row.isPass" src="../../pages/admin/assets/correct.png">
                <img class="pic" v-show="!scope.row.isPass" src="../../pages/admin/assets/close.png">

              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" @click="passLeave(scope.row)">通过</el-button>
                <el-button type="primary" @click="stopLeave(scope.row)">不通过</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name: "HostAdminLeave",
  data(){
    return{
      submit:'',
      isEdit:false,
      tableData: [],
    }
  },
  methods:{
    passLeave(row){
      row.flag = true
      this.submit = row.id

      axios.defaults.headers.common["token"] = this.token;
      axios.put((this.ip + '/leaveMsg/noPass/' + this.submit)).then((response)=>{
        console.log(response)
        console.log(response.data)
      }).catch(function (error) {
        console.log(error);
      });

      this.tableData = undefined
      this.tableData = new Array()

      axios.get((this.ip + '/leaveMsg/noPass')).then((response)=>{
        console.log(response)
        console.log(response.data)
        for(let i=0;i<response.data.length;i++){
          this.tableData.push({
            snumber:response.data[i].snumber,
            sname:response.data[i].sname,
            id:response.data[i].id,
            sid:response.data[i].snumber,
            startDate:response.data[i].startDate,
            endDate:response.data[i].endDate,
            isPass:response.data[i].isPass
          })
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    stopLeave(row){
      row.flag = false
    },
  },
  watch:{
    tableData:{
      deep:true,
      handler(val){
        console.log("检测到变化",val)
      }
    }
  },
  mounted(){
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/leaveMsg/noPass')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.tableData.push({
          snumber:response.data[i].snumber,
          sname:response.data[i].sname,
          id:response.data[i].id,
          sid:response.data[i].snumber,
          startDate:response.data[i].startDate,
          endDate:response.data[i].endDate,
          isPass:response.data[i].isPass
        })
      }
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.pic{
  width: 20px;
  height: 20px;
}
</style>
